<template>
  <div>
  <el-card class="showThisQuestion" @mouseenter.native="mouseIn(item)" @mouseleave.native="mouseOut(item)"
           style="margin:0px;padding: 20px 30px 0px 30px;text-align: left;"
           shadow="never"
           :style="changeEditingCardBorder(item.mouseOnMe,item.isEditing)">
    <div style="margin-bottom: 10px;text-align: left;font-weight: bold;font-size:17px;line-height: 1.3;">
      <span v-show="item.bidati" style="color:red;font-size: 20px;float:left;">* </span>
      <span v-show="autoId">{{id+1}}.</span><span >{{item.title}}</span>
    </div>
    <div v-if="item.note.trim()!=''" style="margin-bottom: 20px;text-align: left;font-size:14px;line-height: 1.3;color:grey">
      说明：{{item.note}}
    </div>
    <div style="padding: 0;margin: 0 0 10px 0;">
      <el-checkbox-group v-model="item.checked" >
        <el-checkbox
            v-for="(option) in item.options"
            :key="option.id"
            :label="option.val"
            style="margin:0 0 5px 0;display: block;"></el-checkbox>
      </el-checkbox-group>
    </div>
  </el-card>
    <btn-group-on-question
        v-show="item.mouseOnMe||item.isEditing"
        :edit-icon="editOrSaveIcon(item)"
        :edit-tips="editOrSaveWords(item)"
        @editMe="editMe" @moveUp="moveUp"  @moveUpUp="moveUpUp"  @moveDown="moveDown" @moveDownDown="moveDownDown"
        @copyMe="copyMe" @deleteMe="deleteMe"
    ></btn-group-on-question>
  <!--          多选编辑区-->
  <div v-if="item.isEditing" style="margin:0px auto;padding: 20px 30px 0px 30px;text-align: left;background-color: rgb(241,241,246);" >
    <el-form :model="item">


      <add-question-head
          :thisquestion="item"
      ></add-question-head>

      <el-form-item style="width: 90%;  margin: 3px auto;" v-for="(option,opindex) in item.options" :key="option.id">
        <span style="font-size:16px;line-height: 1.3;">选项{{opindex+1}}：</span>
        <el-input  style="width: 70%;" v-model="option.val" :value="option.val"  type="textarea" :autosize="{ minRows: 1}" :disabled=ifDisable(option)></el-input>
        <el-button circle style="margin-left: 5px;" :icon="editOrSaveOptionIcon(option)" @click.prevent="editItemOption(opindex,item)" ></el-button>
        <el-button circle style="margin-left: 5px;" icon="el-icon-delete" @click.prevent="removeItemOption(opindex,item)" ></el-button>
        <el-button circle style="margin-left: 5px;" icon="el-icon-plus" @click.prevent="addItemOptionAfterMe(opindex,item)" ></el-button>
      </el-form-item>
    </el-form>
  </div>
  </div>
</template>
<script>
import BtnGroupOnQuestion from "./BtnGroupOnQuestion";
import AddQuestionHead from "./AddQuestionHead";
import {
  questionCreateOption,
  questionDeleteOption,
  questionEditOptionDescription,
  questionEditOptionRemark
} from "../../api";
export default {
  name:'SingleChoice',
  components:{
    BtnGroupOnQuestion,AddQuestionHead
  },
  data(){
    return{

    }
  },
  props:{
    item:Object,
    id:Number,
    editIcon:String,
    autoId:Boolean,
  },
  computed:{
    changeEditingCardBorder(){
      return function (opo,ope){
        if(ope){
          return "border-radius:0px; border:1.5px dotted #2c3e50; background-color: rgb(241,241,246);";
        }else{
          if(opo){
            return "background-color: rgb(241,241,246);";
          }else{
            return "border:none;background-color:white;";
          }
        }
      }
    },
    ifDisable(){
      return function (option){
        return (option.notEditing)? true: false;
      }
    },
    editOrSaveOptionIcon(){
      return function (option){
        return (option.notEditing)?"el-icon-edit":"el-icon-finished";
      }
    },
    editOrSaveIcon(){
      return function (item){
        return (item.isEditing)?"el-icon-finished":"el-icon-edit";
      }
    },
    editOrSaveWords(){
      return function (item){
        return (item.isEditing)?"保存":"编辑";
      }
    },
  },

  methods:{
    mouseIn:function (item){
      this.$set(item,'mouseOnMe',true);
    },
    mouseOut:function (item){
      this.$set(item,'mouseOnMe',false);
    },
    editItemOption:function (opindex,item){
      if(item.options[opindex].notEditing){
        item.options[opindex].notEditing=false;
      }else{
        item.options[opindex].notEditing=true;
        this.ReqEditItemOptionDesc(item.options[opindex]);
        this.ReqEditItemOptionRemark(item.options[opindex]);
      }
    },


    ReqEditItemOptionDesc:function (theOp){
      questionEditOptionDescription(this.$store.state.uid,theOp.id,theOp.val).then(res=>{
        if(res.error_code==0){
          console.log("修改选项内容成功");
        }else{

          console.log(res);
        }
      }).catch(e=>{console.log(e)})
    },
    ReqEditItemOptionRemark:function (theOp){
      questionEditOptionRemark( this.$store.state.uid,theOp.id,theOp.remark).then(res=>{
        if(res.error_code==0){
          console.log("修改选项备注成功");
        }else{
          console.log(theOp);
          console.log( this.$store.state.uid,theOp.id,theOp.remark );

          console.log(res);
        }
      }).catch(e=>{console.log(e)})
    },




    removeItemOption:function (opindex,item){
      var tmp=Object.values({...item.options});
      var theOp=tmp[opindex];
      questionDeleteOption(this.$store.state.uid,item.id,theOp.id).then(res=>{
        if(res.error_code==0){
          console.log("要删除的选项");
          console.log(theOp);
          tmp.splice(opindex,1);
          item.options=tmp;
        }else{
          console.log(res);
        }
      }).catch(e=>{console.log(e)})
    },


    addItemOptionAfterMe:function (opindex,item){
      var x={};
      x.val='选项';x.remark='';x.notEditing=false;
      questionCreateOption(this.$store.state.uid,item.id,opindex+1,x.val,x.remark).then(res=>{
        if(res.error_code==0){
          var tmp=Object.values({...item.options});
          x.id=res.option_id;
          tmp.splice(opindex+1,0,x);
          item.options=tmp;
          console.log(item.options);
        }else{
          console.log(res);
        }
      }).catch(e=>{console.log(e)})
    },

    editMe:function () {
      this.$emit('editMe');
    },

    moveUp(){
      this.$emit('moveUp');
    },
    moveDown(){
      this.$emit('moveDown');
    },
    moveUpUp(){
      this.$emit('moveUpUp');
    },
    moveDownDown(){
      this.$emit('moveDownDown');
    },
    copyMe(){
      this.$emit('copyMe');
    },
    deleteMe(){
      this.$emit('deleteMe');
    }

  }
}
</script>